<template>
	<div class="roomDetail">
		<div class="roomDetail_l">
			<div class="video_box">

				<!-- <video :poster="'http:'+dataList.classRoom.coverImage" ref="videoDom" controls @pause="dataList.isPlay = false"
					@seeking="dataList.isPlay = true">
					<source :src="'http:'+dataList.videoSrc" type="video/mp4" />
				</video> -->
				<!-- <button @click="getTime">1231313</button> -->
				<videoPlay
				      v-bind="options"
				      @loadstart="onLoadStart"
					  @play="plays"
					  @ended="endeds"
					  @timeupdate="onTimeUpdate"
				  />
				  <!-- @timeupdate="onTimeUpdate" -->
			</div>


			<p>{{dataList.classRoom.className}}</p>
			<li>
				<!-- <span>主讲人：郭天富</span> -->
				<span>{{dataList.classRoom.classStatus}}人学习</span>
			</li>
		</div>
		<div class="roomDetail_r">
			<!-- @tab-click="handleClick" -->
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="课程目录" name="first">
					<div class="videoList">
						<li v-for="(vio,idx) in dataList.list" class="videoList_item"
							:class="{active:dataList.videoId == idx}" @click="selectVideo(idx,vio.videoUrl,vio.positionDuration)">
							<div class="videoList_item_left">
								<img v-show="dataList.videoId == idx" src="../../assets/video1.png" alt="">
								<img v-show="dataList.videoId !== idx" src="../../assets/video2.png" alt="">
								<span>{{vio.videoName}}</span>
							</div>
							<span>{{ formatTime(vio.duration) }}</span>
						</li>
					</div>
				</el-tab-pane>
				<el-tab-pane label="课程评论" name="second">
					<div class="commentList">
						<div class="commentList_sc">
							<li class="commentList_item" v-for="(com,index) in dataList.commentList">
								<img src="../../assets/user/teacher.png" alt="">
								<div class="commentList_item_r">
									<div>
										<p>{{com.wxUserName}}</p>
										<span>{{com.createdTime}}</span>
									</div>
									<p class="commentList_item_r_msg">
										{{com.comment}}
									</p>
								</div>

							</li>
						</div>
						<div class="commentList_btn">
							<input v-model="dataList.conment" type="text" placeholder="请输入评论内容">
							<button class="btnS" @click="submit">评论</button>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script setup>
	import "vue3-video-play/dist/style.css";
	import { videoPlay } from "vue3-video-play";
	import {onlineClassDetail,getOnlineClassComment,onlineClassComment,onlineClassStudy,onlineClassStudyPosition} from "../../api/home.js";
	import {
		ref,
		reactive,
		onBeforeMount,
		onBeforeUnmount
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const activeName = ref('first')
	const dataList = reactive({
		videoId: 0,
		videoSrc: '',
		isPlay: false,
		list: [],
		id: '',
		classRoom: '',
		conment: '',
		commentList:'',
		videoTime:''
	})
	onBeforeMount(() => {
		dataList.id = router.currentRoute.value.query.id
		getsearchHotOnlineClass(router.currentRoute.value.query.id)
		getgetOnlineClassComment(router.currentRoute.value.query.id)
	})
	onBeforeUnmount(()=> {
		onlineClassStudyPositionF()
	})
	
	// 视频播放的options
	let options=reactive({
	  width: "100%", //播放器高度
	  height: "100%", //播放器高度
	  color: "#409eff", //主题色
	  title: "", //视频名称
	  src: "", //视频源
	  muted: false, //静音
	  webFullScreen: false,
	  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
	  autoPlay: false, //自动播放
	  loop: false, //循环播放
	  mirror: false, //镜像画面
	  ligthOff: false, //关灯模式
	  volume: 0.3, //默认音量大小
	  control: true, //是否显示控制
	  currentTime:0,//跳转到固定播放时间
	  controlBtns: [
	    "audioTrack",
	    "quality",
	    "speedRate",
	    "volume",
	    "setting",
	    "pip",
	    "pageFullScreen",
	    "fullScreen",
	  ], //显示所有按钮,
	})
	// 更新播放时间
	const onTimeUpdate=(ev)=>{
		dataList.videoTime = ev.target.currentTime
		// console.log(ev.target.currentTime,"999999999")
	//播放实时更新播放时间并将时间传递给后端
	}
	
	// 客户端开始请求数据
	const onLoadStart=(ev)=>{
		// console.log(ev,"22222")
	//重新打开该视频获取最后一次的播放时间，并赋值给ev.target.currentTime继续上次退出时观看
	}
	const getTime= ()=> {
		console.log()
	}
	const formatTime = (val)=> {
	  let hour, minute, second
	  if (val > 60) {
	    minute = parseInt(val / 60)
	    second = parseInt(val % 60)
	
	    if (minute > 60) {
	      hour = parseInt(minute / 60)
	      minute = parseInt(minute % 60)
	    }
	  } else {
	    second = parseInt(val)
	  }
	
	  if (hour < 10) hour = '0' + hour
	  if (minute < 10) minute = '0' + minute
	  if (second < 10) second = '0' + second
	
	  return `${hour || '00'}:${minute || '00'}:${second || '00'}`
	}
	
	const selectVideo = (idx, url,time) => {
		dataList.videoId = idx
		dataList.videoSrc = url
		options.src = 'http:'+url
		if(time){
			options.currentTime = time
		}else{
			onlineClassStudyF()
		}
	}
	// const handleClick = (tab : TabsPaneContext, event : Event) => {
	// 	console.log(tab, event)
	// }
	const getsearchHotOnlineClass = (id) => {
		// var url = 'http://cos-1253892290.cos.ap-guangzhou.myqcloud.com/pic_202330198.mp4'
		// options.src = url
		var data = {
			params: {
				onlineClassUuid: id
			}
		}
		onlineClassDetail(data).then(res=> {
			dataList.classRoom = res.data
			dataList.videoSrc = res.data.videoStudentList[0].videoUrl
			dataList.list = res.data.videoStudentList
			// options.currentTime = res.data.videoStudentList[0].positionDuration
			if(res.data.videoStudentList[0].positionDuration){
				options.currentTime = res.data.videoStudentList[0].positionDuration
			}else{
				onlineClassStudyF()
			}
			var url = 'http:' + res.data.videoStudentList[0].videoUrl
			// var url = 'http://cos-1253892290.cos.ap-guangzhou.myqcloud.com/pic_202330198.mp4'
			options.src = url
			console.log(url)
		})
	}
	const plays = ()=> {
		// if(dataList.list[0].positionDuration){
		// 	options.currentTime = dataList.list[dataList.videoId].positionDuration
		// }else{
		// 	onlineClassStudyF()
		// }
	}
	const onlineClassStudyF = ()=> {
		var data = {
			params:{
				onlineClassUuid: dataList.classRoom.classUuid,
				videoUuid: dataList.list[dataList.videoId].videoUuid,
				wxUserUuid: localStorage.getItem('userUuid')
			}
		}
		onlineClassStudy(data).then(res=> {
			
		})
	}
	const onlineClassStudyPositionF = ()=> {
		var data = {
			params:{
				onlineClassUuid: dataList.classRoom.classUuid,
				positionDuration: dataList.videoTime,
				videoUuid: dataList.list[dataList.videoId].videoUuid
			}
		}
		onlineClassStudyPosition(data).then(res=> {
			
		})
	}
	// 评论列表
	
	const getgetOnlineClassComment = (id) => {
		
		var data = {
			page:{
				pageSize: 0
			},
			params: {
				onlineClassUuid: id
			}
		}
		getOnlineClassComment(data).then(res=> {
			dataList.commentList = res.data.list
		})
	}
	const submit = () => {
		var data = {
			params: {
				comment: dataList.conment,
				onlineClassUuid: dataList.id,
				wxUserName: JSON.parse(localStorage.getItem('userinfo')).nickName,
				wxUserUuid: localStorage.getItem('userUuid')
			}
		}
		onlineClassComment(data).then(res=> {
			dataList.conment = ''
		})
	}
</script>

<style lang="scss" scoped>
	.roomDetail {
		width: 1200px;
		margin: 30px auto;
		display: flex;

		&_l {
			width: 670px;
			height: 536px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17, 145, 142, 0.2);
			overflow: hidden;

			video {
				width: 670px;
				height: 446px;
			}

			p {
				margin: 15px 0 15px 15px;
			}

			li {
				margin-left: 15px;

				span {
					margin-right: 60px;
				}
			}



			.video_box {
				width: 670px;
				height: 446px;
				position: relative;

				video {
					width: 670px;
					height: 446px;
				}

				.mask {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.5);
					z-index: 10;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon-control {
						width: 67px;
						height: 78px;
						cursor: pointer;
					}
				}
			}
		}

		&_r {
			margin-left: 30px;
			width: 500px;
			height: 536px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17, 145, 142, 0.2);
			padding: 20px;
		}

		.videoList {
			display: flex;
			flex-direction: column;

			&_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15px;

				span {
					font-size: 16px;
				}

				&_left {
					display: flex;
					align-items: center;

					img {
						width: 21px;
						height: 21px;
						margin-right: 10px;
					}

					span {
						display: block;
						width: 320px;
					}
				}
			}

			.active {
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;

				span {
					color: #11918E;
				}
			}
		}

		.commentList {
			width: 460px;
			height: 445px;
			overflow: hidden;
			position: relative;

			&_sc {
				width: 480px;
				height: 385px;
				overflow-y: scroll;
			}

			&_btn {
				width: 470px;
				height: 51px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15px;
				position: absolute;
				bottom: 0;

				input {
					border: none;
					outline: medium;
					background-color: rgba(0, 0, 0, 0);
				}
			}

			&_item {
				display: flex;
				justify-content: space-between;
				padding: 20px;
				border-bottom: 1px solid rgba(17, 145, 142, 0.1);

				img {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-right: 10px;
				}

				&_r {
					display: flex;
					flex-direction: column;
					width: 400px;
					div {
						display: flex;
						justify-content: space-between;

						p {
							font-size: 16px;
							font-weight: 400;
							color: #333333;
						}
					}

					&_msg {
						font-size: 15px;
						margin-top: 10px;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}

	:deep(.is-active) {
		color: #11918E;
	}

	:deep(.el-tabs__item):hover {
		color: #11918E;
	}

	:deep(.el-tabs__active-bar) {
		background-color: #11918E;
	}
</style>